﻿@model Nop.Plugin.Widgets.MetroCarousel.Models.PublicInfoModel
@{
    Layout = "";

    Html.AddScriptParts("~/Plugins/Widgets.MetroCarousel/Scripts/metro.min.js");
    Html.AddCssFileParts("~/Plugins/Widgets.MetroCarousel/Content/MetroCarousel/metro-bootstrap.min.css");
    Html.AddCssFileParts("~/Plugins/Widgets.MetroCarousel/Content/MetroCarousel/metro-bootstrap-responsive.min.css");
}
@using System
@using Nop.Web.Framework.UI

@helper RenderSliderLine(string pictureUrl, string text, string link, string dataTransition = "")
{
    if (!string.IsNullOrEmpty(pictureUrl))
    {
        <div class="slide">
            @if (!string.IsNullOrEmpty(link))
            {
                <a href="@link">
                    <img src="@pictureUrl" data-thumb="@pictureUrl" data-transition="@dataTransition" alt="" title="@text" />
                </a>
            }
            else
            {
                <img src="@pictureUrl" data-thumb="@pictureUrl" data-transition="@dataTransition" alt="" title="@text" />
            }
        </div>
    }
}
<div id="metro-carousel" class="carousel">
    @RenderSliderLine(Model.Picture1Url, Model.Text1, Model.Link1)
    @RenderSliderLine(Model.Picture2Url, Model.Text2, Model.Link2)
    @RenderSliderLine(Model.Picture3Url, Model.Text3, Model.Link3)
    @RenderSliderLine(Model.Picture4Url, Model.Text4, Model.Link4)
    @RenderSliderLine(Model.Picture5Url, Model.Text5, Model.Link5)
    <a class="controls left"><i class="icon-arrow-left-3"></i></a>
    <a class="controls right"><i class="icon-arrow-right-3"></i></a>
</div>
<script type="text/javascript">

    var ap = @Model.AutoPlay.ToString().ToLower();
    var p = @Model.Period;
    var d = @Model.Duration;
    var e = "@Model.Effect.ToString().ToLower()";
    var mp = "@Model.MarkerPosition.ToString().ToLower()";

    $(window).load(function () {
        $('#metro-carousel').carousel({
            auto: ap,
            period: p,
            duration: d,
            effect: e,
            markers: {
                position: mp
            }
        });
    });
</script>
